<style lang=sass>
@import "../../assets/sass/message/actions.scss";
</style>

<template>
  <div class="vue-actions vue-actions-bottom" v-bind:class="className"  :transition="transition" v-show="visible">
    <div class="vue-actions-container">
      <div class="vue-actions-header">{{title}}</div>
      <div class="vue-actions-body">
        <div v-for="item in items" class="vue-actions-item" @click="selectItem(item)">{{item.text}}</div>
      </div>
    </div>
    <div class="vue-actions-footer">
      <div class="vue-actions-btns">
      <div class="vue-actions-btn" @click="cancel">取消</div>
      </div>
    </div>
    </div>
  </div>
  <Mask v-show="visible"></Mask>
</template>

<script>
import Mask from "../mask/mask"

export default {
  components:{
    Mask//依赖组件Mask
  },
  props:{//继承父级组件参数
      title:{
        type:String,
        default:window.location
      },
      items:{
        type:Array,
        default:[]
      },
      className:String,
      transition:{
        type:String,
        default:"vue-actions-bottom"
      },
      visible:{
        type:Boolean,
        default:false
      }
  },
  methods:{
      selectItem(item){
         this.$emit("selected",item);
      },
      cancel(){
         this.$emit("cancel");
      }
  }
  
}
</script>